<template>
  <div>
    <el-button size="mini" type="warning" @click="add" title="只能添加大于10或者小于100的，或者520">新增</el-button>
    <el-input v-model="val" :value="val" style="margin-top:10px"></el-input>
    <div style="margin-top:10px">{{sum}}</div>
    <h1>路由传参的四种方法</h1>
    <el-divider></el-divider>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="路径传参" name="first">
        <router-link to="/areaDetail/fileSix?id=888">路径直接传参</router-link>
      </el-tab-pane>
      <el-tab-pane label="方法传参" name="second">
        <el-button size="mini" type="warning" @click="jumpList">方法传参</el-button>
      </el-tab-pane>
      <el-tab-pane label="name匹配传参" name="third">
        <el-button size="mini" type="warning" @click="jumpListName">name方法传参</el-button>
      </el-tab-pane>
      <el-tab-pane label="query匹配传参" name="fourth">
        <el-button size="mini" type="warning" @click="jumpListQuery">query方法传参</el-button>
      </el-tab-pane>
    </el-tabs>
    <el-divider></el-divider>
    <h1>组件通信的方式</h1>
    <el-divider></el-divider>
    <div class="app">
      <h1>父组件</h1>
      <h4>姓名：{{name}}，年龄：{{age}}</h4>
      <!-- @updateName监听事件 -->
      <h2>组件1</h2>
      <Child1 :name="name" :age="age" :abc='abc' @updateName="upname" @updateAge="upage" @closeChange='cdwdf'></Child1>
      <h2>组件2</h2>
      <Child2></Child2>
    </div>
    <!-- <ul>
      <li>父传子方式
        <h1>父组件</h1>
        <h4>姓名：{{name}}，年龄：{{age}}</h4>
        <h1>子组件</h1>
        <ceshi1 :name="name" :age="age" @updateName="upname" @updateAge="upage"></ceshi1>
        <ceshi2></ceshi2>
      </li> -->
    <!-- <li>2.祖孙组件通信方式(provide+inject)</li> -->
    <!-- <li>3.兄弟组件通信方式($bus中央事件总线)</li> -->
    <!-- <li>4.Vuex(复杂关系的组件数据传递)</li> -->
    </ul>
  </div>
</template>
<script>
import Child1 from '../../../components/ceshi.vue'
import Child2 from '../../../components/ceshi2.vue'
import messageUtils from '../../../plugin/promptPlug'
export default {
  name: 'ResourceList',
  components: {
    Child1,
    Child2
  },
  data() {
    return {
      abc: '我是父组件的数据',
      activeName: 'first',
      id: 455,
      name: '王烽柳',
      age: 20,
      val: '',
      sum: [],

    }
  },
  //祖传参
  provide() {
    return {
      name: this.name,
      age: this.age,
      upname: this.upname,
      upage: this.upage
    }
  },
  mounted() {

    this.$children.map((r, i) => {
      console.log(r.name);

    })
    // console.log();
  },
  methods: {
    cdwdf(e) {
      this.name = e
      // console.log(e);
    },
    add() {

      this.val > 10 && this.val < 100 ? this.sum.push(this.val) : this.val == 520 ? this.sum.push(this.val) : this.$message.error('不能添加')
      this.val = ''
      // if(this.sum.push(this.val)) this.val=''

    },
    //父从子接受数据
    upname(e) {
      this.name = e
    },
    upage(e) {
      this.age = e
    },
    // //直接传参
    jumpList() {
      // 成功通知
      // messageUtils.notice('操作成功！')
      // // 失败通知
      // messageUtils.notice('操作失败！', 'error')
      // // 失败通知  延时3秒
      // messageUtils.notice('操作失败！', 'error', 3000)

      // // 成功提示
      // messageUtils.Message('操作成功！')
      // // 失败提示
      messageUtils.Message('已有query传参', 'error')
      // // 失败提示  延时3秒
      // messageUtils.('操作失败！', 'error',30000)

      // 消息确认框
      // messageUtils.openConfirm('确定删除吗？', 'warning', () => {
      //   console.log('操作成功！')
      // })
      // this.$message({
      //   message: '登录成功',
      //   type: 'success'
      // });
      // this.$router.push(`/areaDetail/fileFive/${this.id}`)
    },
    //根据name匹配路由
    jumpListName() {
      this.$message.error('已有query传参')
      // this.$router.push({
      //   name: 'wx',
      //   params: {
      //     id: 666
      //   }
      // })
    },
    // query    
    jumpListQuery() {
      this.$router.push({
        path: '/areaDetail/fileSix',
        query: {
          id: 5201314
        }
      })
    },
    handleClick(tab, event) {
      // console.log(tab, event);
    }
  }
}
</script>
<style scoped lang='scss'>
h1,
h2 {
  text-align: center;
}
.app {
  margin: 10px;
  border: 1px solid black;
  padding: 10px;
}
</style>